<template>
  <a-card class="ax_sticky_top">
    <template #title>文件管理列表</template>
    <template #extra>
      <div class="flex gap-2">
        <a-input
          v-model:value="filesTable.query.fileName"
          class="flex-1"
          placeholder="请输入文件名称"
          @press-enter="filesSearch"
          allow-clear
        ></a-input>

        <div><a-button type="primary" @click="filesSearch">搜索</a-button></div>
      </div>
    </template>

    <div class="mb-12 flex justify-between items-center">
      <div>
        <a-segmented
          v-model:value="filesTable.query.fileType"
          placeholder="请输入文件类型"
          @press-enter="filesSearch"
          :options="fileTypeOptions"
          allow-clear
          @change="filesSearch"
        ></a-segmented>
      </div>
      <a-tooltip title="前往帮助中心">
        <a
          class="system__icon"
          target="_blank"
          href="https://www.yuque.com/u32997899/ax/oeygvcxcbza51sgx?singleDoc# 《用户文件》"
        >
          <QuestionCircleTwoTone />
        </a>
      </a-tooltip>
    </div>
    <a-flex justify="space-between" :align="'center'">
      <a-flex justify="space-between" :align="'center'">
        <a-flex :align="'center'" :gap="4">
          <div v-perm="'ax:files:add'">
            <a-tooltip title="新建">
              <a-button type="primary" @click="filesCreate">
                <PlusOutlined />
              </a-button>
            </a-tooltip>
          </div>

          <div v-perm="'ax:files:edit'">
            <a-tooltip title="编辑">
              <a-button type="link" @click="filesEdit()" :disabled="filesTable.keys.length !== 1">
                <EditOutlined />
              </a-button>
            </a-tooltip>
          </div>
          <div v-perm="'ax:files:list'">
            <a-tooltip title="刷新">
              <a-button type="link" @click="filesList">
                <SyncOutlined />
              </a-button>
            </a-tooltip>
          </div>
          <div v-perm="'ax:files:remove'">
            <a-popconfirm
              title="确定要删除吗"
              :disabled="filesTable.keys.length === 0"
              placement="bottomRight"
              @confirm="filesDelete()"
            >
              <a-tooltip title="批量删除">
                <a-button danger type="link" :disabled="filesTable.keys.length === 0">
                  <DeleteOutlined />
                </a-button>
              </a-tooltip>
            </a-popconfirm>
          </div>
        </a-flex>
      </a-flex>
      <a-flex>
        <div v-perm="'ax:files:export'">
          <a-popover title="分享" placement="bottomRight" trigger="click">
            <a-button type="link" :disabled="filesForm.filePath.length === 0">
              <ShareAltOutlined />
            </a-button>
            <template #content>
              <div class="flex flex-col gap-4 w-[200px] items-center">
                <a-qrcode :value="filesForm.filePath" />
                <a-input size="middle" class="w-[100%]" :value="filesForm.filePath"></a-input>
                <div class="flex gap-4">
                  <a-tooltip title="下载">
                    <a-button>
                      <a target="_blank" :href="filesForm.filePath" :download="filesForm.fileName">
                        <DownloadOutlined />
                      </a>
                    </a-button>
                  </a-tooltip>
                  <a-tooltip title="复制">
                    <a-button @click="copyText(filesForm.filePath)">
                      <CopyOutlined />
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
            </template>
          </a-popover>
        </div>

        <FieldVue
          :raw="filesRawColumns"
          :columns="filesColumns"
          :module-name="filesTable.moduleName"
        />
        <div>
          <a-tooltip
            title="卡片模式"
            @click="filesTable.viewMode = 'card'"
            v-if="filesTable.viewMode === 'table'"
          >
            <a-button type="link">
              <OrderedListOutlined />
            </a-button>
          </a-tooltip>

          <a-tooltip title="表格模式" @click="filesTable.viewMode = 'table'" v-else>
            <a-button type="link">
              <AppstoreAddOutlined />
            </a-button>
          </a-tooltip>
        </div>
      </a-flex>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import FieldVue from '@/views/components/table/Field.vue';
import {
  AppstoreAddOutlined,
  DeleteOutlined,
  OrderedListOutlined,
  ShareAltOutlined,
  SyncOutlined,
} from '@ant-design/icons-vue';
import { filesColumns, filesRawColumns } from '../../data/column';
import { filesCreate, filesDelete, filesEdit, filesList, filesSearch } from '../../data/curd';
import { fileTypeOptions } from '../../data/options';
import { filesTable } from '../../data/table';
import { filesForm } from '../../data/form';
import { copyText } from '@/utils/common/utils';
</script>

<style lang="scss" scoped></style>
